import React, { useState } from "react";
import { Image, InputNumber } from "antd";
import SupplierSelect from "@/views/components/SupplierSelect";
import { Input, Select } from "@/views/components/PrefixPlaceholder";
import TimeTabs from "./components/Actions/TimeTabs";
import CommonStoreSearchInput from "@/views/components/CommonStoreSearchInput/index";
import AreaCodeSelect from "./components/Actions/AreaCodeSelect";
import moment from "moment";

export default ({ areaOption = [], handleChange, tabsValue }) => {
	const defaultColumns = [
		{
			name: "序号",
			code: "index",
			lock: true,
			render: (t, r, i) => i + 1,
			width: 60
		},
		{
			name: "供应商",
			code: "supplierName",
			width: 180,
			render: (v, record, index) => {
				return (
					<SupplierSelect
						key={index}
						defaultValue={record.supplierId}
						size="middle"
						style={{ width: "100%" }}
						options={
							(record?.supplierList || record?.goodsSkuMatches || []).map(item => {
								return {
									value: item.supplierId,
									label: item.supplierName
								};
							}) || []
						}
						allowClear
						placeholder="供应商"
						onSelect={(value, option) => {
							handleChange({ supplierId: value, supplierName: option.label }, index);
						}}
					/>
				);
			},
			search: {
				order: 10,
				code: "storeName",
				content: () => <CommonStoreSearchInput type="storeName" valueKey="storeName" placeholder="供应商" onChange={() => {}} />
			}
		},
		{
			name: "所属区域编码",
			code: "areaName",
			search: {
				code: "areaCodes",
				order: 20,
				content: () => (
					<AreaCodeSelect
						origin="true"
						size="middle"
						placeholder="区域编码"
						mode="multiple"
						options={areaOption.current}
						showArrow={false}
						maxTagCount={2}
						style={{ lineHeight: "22px" }}
					/>
				)
			},
			width: 110
		},
		{
			name: "商品图片",
			code: "skuImage",
			width: 100,
			render: (value, record) => {
				return <Image width={32} height={32} src={record.skuImage} />;
			}
		},
		{
			name: "商品编码",
			code: "skuCode",
			search: { order: 30, content: () => <Input placeholder="商品编码" /> }
		},
		{
			name: "款式编码",
			code: "spuCode",
			search: { order: 40, content: () => <Input placeholder="款式编码" /> }
		},
		{
			name: "商品名称",
			code: "skuName",
			width: 210,
			search: { order: 50, code: "goodsName", content: () => <Input placeholder="商品名称" /> }
		},
		{
			name: "商品简称",
			code: "goodsAbbreviation",
			search: { order: 60, code: "goodsAbbreviation", content: () => <Input placeholder="商品简称" /> }
		},
		{
			name: "颜色规格",
			code: "skuSpec",
			search: { order: 70, code: "goodsSpec", content: () => <Input placeholder="颜色规格" /> }
		},
		{
			name: "采购单价",
			code: "skuPrice",
			render: v => <span className="not-red">{v && `￥${Number(v).toFixed(2)}`}</span>
		},
		{
			name: "原建议采购数",
			code: "suggestNum"
		},
		{
			name: "实际采购数",
			code: "actualNum",
			width: 220,
			render: (v, record, index) => {
				const multiple = 1000;
				const bigIntNum1 = BigInt(Math.round((record.skuPrice || 0) * multiple));
				const bigIntNum2 = BigInt(Math.round((v || 0) * multiple));
				const total = Number(bigIntNum1 * bigIntNum2) / (multiple * multiple);
				return (
					<div className="flx-center">
						<span style={{ flex: 1 }}>￥{record.skuPrice || 0} *</span>
						<InputNumber
							max={999999999}
							key={index}
							value={v}
							size={"default"}
							controls={false}
							precision={0}
							onChange={v => {}}
							onBlur={e => {
								handleChange({ actualNum: e.target.value }, index, true);
							}}
							style={{
								marginLeft: "5px",
								width: 120,
								height: 32
							}}
						/>
						<span style={{ flex: 1 }}>={total}</span>
					</div>
				);
			}
		},
		{
			name: "时间",
			code: "times",
			hidden: true,
			search: {
				order: 80,
				span: 12,
				// formItemProps: {
				// 	initialValue: [moment().startOf("day").subtract(6, "d"), moment().endOf("day")]
				// },
				// formItemProps: {
				// 	initialValue: ["2024-06-05 00:00:00", "2024-06-11 23:59:59"]
				// },
				group: [
					{
						span: 2,
						code: "dateType",
						content: () => <Select placeholder="订单日期" open={false} showArrow={false} className="right-no-radius width-full" />
					},
					{
						formItemProps: {
							initialValue: [moment().startOf("day").subtract(6, "d"), moment().endOf("day")]
						},
						keys: ["beginTime", "endTime"],
						span: 20,
						code: "time",

						content: () => <TimeTabs tabsValue={tabsValue} />
					}
				]
			}
		}
		// {
		// 	name: "云梦泽主仓",
		// 	code: "TODO1"
		// },
		// {
		// 	name: "发货仓1",
		// 	code: "TODO1"
		// },
		// {
		// 	name: "发货仓2",
		// 	code: "TODO1"
		// },
		// {
		// 	name: "云梦泽销退仓",
		// 	code: "TODO1"
		// },
		// {
		// 	name: "云梦泽次品仓",
		// 	code: "TODO1"
		// },
		// {
		// 	name: "采购在途",
		// 	code: "TODO1"
		// }
	];
	const [columns, setColumns] = useState(defaultColumns);
	return { columns, setColumns, defaultColumns };
};
